<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div id="publicKwPicturesIdFlag" class="xsfc bg1 xsBox">
    <div class="xsfcTit pTit">{{itemData.title}}</div>
    <div class="xsfchzjgCon borderCon">
      <ul class="clearfix" :class="itemData.flag == 'china' ? 'chinaUl':'interUl'">
        <li v-for="item in itemData.service">
          <a :href="routineFlag+item.id">
            <img :src="item.imageVertical">
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
      <a href="javascript:void(0)" v-on:click="loadMore(itemData.flag)" class="jzgd" :class="itemData.flag == 'china' ? 'chinaGetMore':'interGetMore'">加载更多</a>
      <a href="javascript:void (0)" class="jzgdFlag" :class="itemData.flag == 'china' ? 'chinaNoMore':'interNoMore'" style="display: none;font-size: 16px;background:red;text-align:center;margin: 0 auto;margin-bottom: 20px;width:150px;height: 34px;line-height: 34px;color: #fff;border-radius: 5px;">数据见底啦!</a>
    </div>
  </div>
</template>
<script>
  export default {
    page: 0,
    mounted: function () {

    },
    methods: {
      loadMore: function (flag) {
        var me = this;
        //中国区 点击 加载更多
        if(flag == 'china'){
          //请求接口获取 另外12条 图集资讯数据
          me.$http.get('http://m.nsr.com.cn/xinsilu/v1/column/content/258?max=12&offset='+me.offsetFlagChina+'&type=3&siteid=1', {
            params: {}
          }).then(response => {
            if (response.data.code == 'R0000000') {
              //请求接口成功
              me.picsData = response.data.data.returnList;
              //无数据了
              if(me.picsData.length == 0){
                $('.chinaNoMore').css('display','block');
                $('.chinaGetMore').css('display','none');
              }else{
                //有数据时循环重构数据，追加在ul标签后面
                for(var i = 0;i< me.picsData.length;i++){
                  var liStr = "<li>";
                  liStr += '<a href="'+document.location.pathname+'#/kidsworld/pictureDetail?infoId='+me.picsData[i]['id']+'">';
                  liStr += '<img src="'+me.picsData[i]['imageVertical']+'">';
                  liStr += '<p>'+me.picsData[i]['title']+'</p>';
                  liStr += '</a>';
                  liStr += '</li>';
                  $(".chinaUl").append(liStr); //在ul标签上动态添加li标签
                }
                //偏移量 往前推进
                me.offsetFlagChina = me.offsetFlagChina + me.picsData.length;
              }
            }else{
              //请求接口失败
              $('.chinaNoMore').css('display','block');
              $('.chinaGetMore').css('display','none');
            }
          }, response => {
          });
        }
      }
    },
    props: ['itemData'],
    name: 'albumBox',
    //数据
    data() {
      return {
        list: [],
        routineFlag:document.location.pathname+'#/kidsworld/pictureDetail?infoId=',//图集详情页 跳转路由
        offsetFlagChina: this.itemData.service.length?this.itemData.service.length:12,//中国区 查询 图集 时的数据偏移量
        picsData:{},//新获取的 9条 图集数据
      }
    }
  }
</script>

<style>

</style>
